<template>
  <div class="top-container">
    <!-- 顶部图片 -->
    <div class="top-content flex">
      <img
        class="top-img"
        src="https://imagev2.xmcdn.com/storages/3777-audiofreehighqps/49/07/GMCoOSMH3Kb7AAAPQgH_va2X.png"
        alt=""
        @click="handle"
      />
      <div>
        <el-button class="mybutton" round type="danger" size="small" @click="handle1">
          打开APP
        </el-button>
      </div>
    </div>

    <!-- 搜索框 -->
    <van-search shape="round" class="mysearch" placeholder="搜索" @click="goSearch" />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

// 跳转搜索页的回调
const router = useRouter()
 function goSearch(){
  router.push({
    name:'search'
  })
}
// 喜马拉雅logo点击回到主页的回调
const handle = () => {
  router.push({
    name:'home'
  })
}

//下载app点击跳转下载页面的回调
const handle1 = () => {
  router.push({
    name:'download'
  })
}

</script>

<script lang="ts">
export default {
  name: 'Header',
}
</script>

<style scoped lang="less">
.top-container {
  width: 100%;
  height: 100px;
  padding: 15px;
  box-sizing: border-box;
}

.top-content {
  display: flex;
  justify-content: space-between;
}
.top-img {
  float: left;
  width: 116px;
}

.mybutton {
  width: 88px;
  font-size: 14px;
  background: red;
}
.mysearch {
  padding: 0;
  margin-top: 10px;

}
</style>
